<template>
  <div class=" classify">
    <div class="classify-header sb ">
      <div class="classify-header-search ">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="菜品名称">
            <el-input v-model="form.name" placeholder="菜品名称" clearable />
          </el-form-item>
          <el-form-item label="菜品分类">
            <el-select v-model="form.categoryId" placeholder="分类类型" clearable>
              <el-option  v-for="item in classifyList " :key="item.id" :label="item.name" :value="item.id" />
       
            </el-select>
          </el-form-item>
          <el-form-item label="售卖状态">
            <el-select v-model="form.status" placeholder=" 售卖状态" clearable>
              <el-option label="起售" value="1" />
              <el-option label="停用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="butn center" type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="classify-header-add ">
        <el-button type="danger" key="danger" text>批量删除</el-button>
        <el-button class="buton_yellow" type="primary" :icon="Plus">新建菜品</el-button>
      </div>
    </div>
    <div class="classify-content">
      <el-table :data="userData" style="width: 100%" border>




        <el-table-column v-for="item in colums" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width"
          :formatter="item.formatter" align="center" />


        <el-table-column prop="image" label="图片" align="center">

          <template #="{ row }">

<!-- <div>{{ row.image }}</div> -->
<img :src="row.image" alt="" style="width: 100px; height: 100px;" />
</template>
        </el-table-column>


        <el-table-column prop="status" label="状态" align="center">

<template #default="scope">

  <span :class="['dot', scope.row.status === 0 ? 'block' : '']"></span> {{ scope.row.status === 0
    ? '禁用' : '启用' }}
</template>
</el-table-column>

        <el-table-column label="操作" align="center">

          <template v-slot="{ row }">
            <el-button :type="row.status === 1 ? 'primary' : ''" link @click="edit(row)"> 修改 </el-button>
            <el-button type="danger" link @click="deletes(row)"> 删除 </el-button>
            <el-button :type="row.status === 1 ? 'primary' : ''" link @click="deles(row)">{{ row.status == 1
              ? "禁用" : "启用" }}</el-button>
          </template>


        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;">

        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
          layout="total, sizes,->,  prev, pager , next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <div>

    </div>
  </div>
</template>

<script setup  >
import { ElNotification } from 'element-plus'
import {getList,getdish} from '@/api/classify'
import { ref, reactive,onMounted } from 'vue'
import {
  Plus
} from '@element-plus/icons-vue'


// 搜索
const classifyList = ref([])
const form = reactive({
  name: '',
  categoryId: '',
  status: "",
  page: 1,
  pageSize: 5

})



const onSubmit = async() => {

  let resdish  = await getdish(form)
if (resdish.code === 1){
  userData.value = resdish.data.records
  total.value = resdish.data.total
  console.log(resdish.data);
}else {
  ElNotification({
            type: 'error',
            message:resdish.msg ,
        })

}
}


// 表格

const colums = reactive([

  {
    prop: 'name', label: '分类名称'
  },
  {
    prop: 'type', label: '菜品类型',
    formatter(row) {
      return row.type === 1 ? '菜品套餐' : '人气套餐'
    }
  },
  {
    prop: 'updateTime', label: '最后操作时间'

  }

])

const userData = ref([])

// 分页

const pageSize = ref(5)
const page = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
  form.pageSize = val
  onSubmit()
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  form.page = val
  onSubmit()
  console.log(`current page: ${val}`)
}



onMounted(async () => {
  let resList = await getList()
  if (resList.code === 1){
    classifyList.value = resList.data
  }else {
    ElNotification({
            type: 'error',
            message:resList.msg ,
        })

  }



let resdish  = await getdish(form)
if (resdish.code === 1){
  userData.value = resdish.data.records
  total.value = resdish.data.total
  console.log(resdish.data);
}else {
  ElNotification({
            type: 'error',
            message:resdish.msg ,
        })

}


})
</script>

<style  scoped lang="scss">
.classify {
  width: 100%;
  height: 100%;


  .classify-header {
    width: 100%;
    height: 10%;


    .classify-header-search {
      width: 80%;
      height: 100%;

      .butn {
        background-color: #323435;
        border: none;
        color: #fff
          /*  */
        ;
        padding: 15px;
      }
    }

    .classify-header-add {
      width: 20%;
      height: 100%;


      .buton_yellow {
        background-color: #FFBA02;
        color: #000;
        border: none;
        padding: 15px;
        /*  */
      }



    }


  }

  .classify-content {
    width: 100%;
    height: 90%;

  }
}
</style>
<style>
.demo-form-inline .el-input {
  --el-input-width: 170px;
}

.demo-form-inline .el-select {
  --el-select-width: 170px;
}
</style>